<template>
    <div class="modifyPage">
      <el-form class="paper-upload-container" ref="form" :model="paperInfo" :rules="rule">
        <div class="modify-title">基础信息</div>
        <el-form-item class="modify-form-item" label="论文标题" size="medium" prop="title">
          <el-input v-model="paperInfo.title" :disabled="disabledStatus">
          </el-input>
        </el-form-item>
        <el-form-item class="modify-form-item" label="所属比赛" size="medium" prop="competitionName">
          <el-input v-model="paperInfo.competitionName" :disabled="disabledStatus">
          </el-input>
        </el-form-item>
        <el-form-item class="modify-form-item" label="论文作者" size="medium" prop="author">
          <el-input v-model="paperInfo.author" :disabled="disabledStatus">
          </el-input>
        </el-form-item>
        <el-form-item class="modify-form-item" label="论文领域" size="medium" prop="domain">
          <el-input v-model="paperInfo.domain" :disabled="disabledStatus">
          </el-input>
        </el-form-item>
        <el-form-item class="modify-form-item" label="比赛年份" size="medium" prop="year">
          <el-input v-model="paperInfo.year" :disabled="disabledStatus">
          </el-input>
        </el-form-item>
        <el-form-item class="modify-form-item" label="题号索引" size="medium" prop="type">
          <el-input v-model="paperInfo.type" :disabled="disabledStatus">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="modify">
            {{disabledStatus === true ? '修改' : '确认'}}
            <i :class="disabledStatus === true? 'el-icon-edit' : 'el-icon-check' "></i>
          </el-button>
          <el-button type="success" @click="updatePaper">保存<i class="el-icon-upload2"></i></el-button>
        </el-form-item>
        <div class="modify-title">其他信息</div>
        <div class="paper-modify-form-item">
          <div class="paper-modify-form-item-label">算法标签</div>
          <el-input
            @keydown.enter.native="addMethod"
            v-model="methodInput"
            placeholder="按回车确认添加"
            :style="{width: '120px'}"
            type="text"
            size="small"
            class="paper-modify-form-item-input"
          />
          <div class="paper-modify-form-item-pl">
            <el-tag
              v-for="(item,index) in methodList"
              :key="item.id"
              effect="plain"
              closable
              :style="{height: '26px', lineHeight: '26px', marginLeft: '5px', marginBottom: '3px'}"
              @close="deleteMethod(index)"
            >
              {{item.methodName}}
            </el-tag>
          </div>
        </div>
        <div class="paper-modify-form-item">
          <div class="paper-modify-form-item-label">附件资源</div>
          <el-upload
            ref="upload"
            :multiple="false"
            action=""
            auto-upload
            :http-request="serverUpload"
            :show-file-list="false"
          >
            <i class="iconfont icon-cloudupload upload-icon" slot="trigger"/>
            <!--        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
          </el-upload>
          <div class="paper-modify-form-item-pl">
            <div
              class="paper-modify-form-item-file"
              v-for="(item,index) in fileList"
              :key="index"
            >
              {{item.filename}}
              <i :style="{cursor: 'pointer'}" @click="deleteFile(index)" class="iconfont icon-delete"/>
            </div>
          </div>
        </div>
      </el-form>
    </div>
</template>

<script>
  import {
    addFile,
    addMethod, deleteFile,
    deleteMethod,
    getFileListByPid,
    getMethodByPid,
    getPaperDetail,
    updatePaperInfo
  } from "../../api/paper";
  import {avatarMap, ROLE_KEY, ROLE_MAP, UID_KEY} from "../../constants";
  import axios from "axios";
  import {getFileOssConfig} from "../../api";
  export default {
    name: "modify",
    data() {
      return{
        ossConfig: {},
        disabledStatus:true,
        paperInfo: {
          methodList:[]
        },
        methodList: [],
        methodInput: '',
        fileList: [],
        rule:{
          title:[
            {required:true, message:'论文标题不能为空', trigger:'blur'}
          ],
          competitionName:[
            {required:true, message:'比赛名称不能为空', trigger:'blur'}
          ],
          author:[
            {required:true, message:'论文作者不能为空', trigger:'blur'}
          ],
          domain:[
            {required:true, message:'论文领域不能为空', trigger:'blur'}
          ],
          year:[
            {required:true, message:'比赛年份不能为空', trigger:'blur'}
          ],
          type:[
            {required:true, message:'题号索引不能为空', trigger:'blur'}
          ]
        },
      }
    },
    methods:{
      deleteFile(index) {
        let data = {
          id: this.fileList[index].id,
          filepath: this.fileList[index].filepath
        }
        deleteFile(data).then(res => {
          this.$message.success("删除成功")
          this.fileList.splice(index)
        })
      },
      serverUpload({file}) {
        const formData = new FormData();
        //参数顺序有关 file必须放在最后
        formData.append("key", this.ossConfig.dir + `${this.$route.params.id}/` + file.name)
        for(let key in this.ossConfig) {
          formData.append(key, this.ossConfig[key])
        }
        formData.append("file", file);

        const data = {
          pid: this.$route.params.id,
          filename: file.name,
          filepath : this.ossConfig.dir + `${this.$route.params.id}/` + file.name
        }
        console.log(data)

        axios.post(this.ossConfig.host, formData).then(res => {
          console.log("success");
          const data = {
            pid: this.$route.params.id,
            filename: file.name,
            filepath : this.ossConfig.dir + `${this.$route.params.id}/` + file.name
          }
          addFile(data).then(res => {
            this.$message.success("上传成功")
            this.fileList.push(res.data)
          })
        })
      },
      handleChange(file, fileList) {
        console.log(file);
        console.log(fileList);
        this.fileList = fileList
      },
      addMethod() {
        const data = {
          pid: this.$route.params.id,
          methodName: this.methodInput
        };
        addMethod(data).then(res => {
          this.$message.success("添加成功")
          this.methodList.push(res.data)
          this.methodInput = ""
        })
      },
      deleteMethod(index) {
        const data = {
          id: this.methodList[index].id
        }
        deleteMethod(data).then(res => {
          this.$message.success("删除成功")
          this.methodList.splice(index, 1)
        })
      },
      modify() {
        this.disabledStatus = !this.disabledStatus;
        console.log(this.disabledStatus)
      },
      updatePaper() {
        if(!this.disabledStatus) {
          this.$message({
            showClose: true,
            message:'请先确认编辑内容',
            type:'warning'
          })
          return;
        }
        updatePaperInfo(this.paperInfo)
          .then(res => {
            this.$message({
              showClose: true,
              type:'success',
              message:'更新论文信息成功'
            })
            this.$router.push(`/paper/detail/${this.paperInfo.pid}`)
          })
          .catch(error => {
            this.$message({
              showClose: true,
              message:'更新论文信息失败',
              type:'error'
            })
          })
      }
    },
    mounted() {
      getPaperDetail({'pid': this.$route.params.id}).then(res => {
        this.paperInfo = res.data
      });
      const data = {
        pid: this.$route.params.id
      }
      getMethodByPid(data).then(res => {
        this.methodList = res.data
      })
      getFileListByPid(data).then(res => {
        this.fileList = res.data
      })
      getFileOssConfig().then(res => {
        this.ossConfig = res.data;
      })
      console.log(localStorage.getItem(ROLE_KEY))

    }
  }
</script>

<style lang="scss" scoped>
  .paper-upload-container {
    margin: 15px;
    padding: 25px;
    background-color: white;
    border-radius: 5px;
  }
  .modify-form-item {
    width: 60%;
  }
  .modify-title {
    font-weight: bold;
    font-size: 20px;
    line-height: 26px;
    margin-bottom: 10px;
  }
  .paper-modify {
    &-form-item {
      display: flex;
      align-items: center;
      font-size: 18px;
      margin-bottom: 30px;
      &-label {
        width: 95px;
      }
      &-input {
        font-size: 14px;
        width: 200px;
      }
      &-pl {
        display: flex;
        max-width: 800px;
        flex-wrap: wrap;
        align-items: center;
      }
      &-file {
        position: relative;
        top: 2px;
        margin-right: 10px;
        margin-left: 10px;
        margin-bottom: 3px;
      }
    }
  }
</style>
